<template>
    <div class="teamModel">

        <div class="teamCardModel">
            <!-- <div class="font12 m_b_10">
                {{ $t("dj") }} :黄金
            </div> -->
            <div class="jlfelx" v-if="taticList">
                <div class="font12 m_b_10 w50">
                    <img src="@/assets/vip-dengji-.png" class="icon" alt="">
                    <div>
                        <div class="m_b_5">{{ $t("zw") }}</div>
                        <div class="rise " style="margin-right: 5px;">{{ levelMath(info.level) }}</div>
                        <div class="rise " v-if="info.operatorFlag==2">{{ $t('yys') }}</div>
                    </div>

                </div>
                <div class="font12 m_b_10 w50" >
                    <img src="@/assets/xiazaizongrenshu.png" class="icon" alt="">
                    <div>
                        <div class="m_b_5"> {{ $t("tdzrs") }}</div>
                        <div class="rise " v-if="taticList[4]">{{ formatAmount(taticList[4].amount,3) }}</div>
                        <div class="rise " v-else>0</div>
                    </div>
                </div>
                <div class="font12 m_b_10 w50">
                    <img src="@/assets/jiangli.png" class="icon" alt="">
                    <div>
                        <div class="m_b_5">{{ $t("jrtdjl") }}</div>
                        <div class="rise "  v-if="taticList[0]">{{ formatAmount(taticList[0].amount,3) }}</div>
                        <div class="rise " v-else>0</div>
                    </div>

                </div>
                <div class="font12 m_b_10 w50" >
                    <img src="@/assets/jiangli.png" class="icon" alt="">
                    <div>
                        <div class="m_b_5"> {{ $t("ljtdjl") }}</div>
                        <div class="rise " v-if="taticList[1]">{{ formatAmount(taticList[1].amount,3) }}</div>
                        <div class="rise " v-else>0</div>
                    </div>
                </div>
                <div class="font12 m_b_10 w50" >
                    <img src="@/assets/jiangli.png" class="icon" alt="">
                    <div>
                        <div class="m_b_5"> {{ $t("jrlsjl") }}</div>
                        <div class="rise " v-if="taticList[2]">{{ formatAmount(taticList[2].amount,3) }}</div>
                        <div class="rise " v-else>0</div>
                    </div>
                </div>
                <div class="font12 m_b_10 w50" >
                    <img src="@/assets/jiangli.png" class="icon" alt="">
                    <div>
                        <div class="m_b_5"> {{ $t("ljlsjl") }}</div>
                        <div class="rise " v-if="taticList[3]">{{ formatAmount(taticList[3].amount,3) }}</div>
                        <div class="rise " v-else>0</div>
                    </div>

                </div>

                <div class="font12 m_b_10 w50" >
                    <img src="@/assets/a-zijintouzi.png" class="icon" alt="">
                    <div>
                        <div class="m_b_5"> {{ $t("xqlcze") }}</div>
                        <div class="rise " v-if="taticList[6]">{{ formatAmount(taticList[6].amount,3) }}</div>
                        <div class="rise " v-else>0</div>
                    </div>
                </div>
                <div class="font12 m_b_10 w50" >
                    <img src="@/assets/a-zijintouzi.png" class="icon" alt="">
                    <div>
                        <div class="m_b_5"> {{ $t("tdlcze") }}</div>
                        <div class="rise " v-if="taticList[5]">{{ formatAmount(taticList[5].amount,3) }}</div>
                        <div class="rise " v-else>0</div>
                    </div>
                </div>
           

            </div>

        </div>
        <!-- <div class="font14 m_b_10" style="color: var(--lcitemTitle);">{{ $t('syjl') }}</div> -->
        <div class="borders">
            <div class="header">
                <div style="padding: 0;" class="white--text text-center item">{{ $t("dz") }}</div>
                <div style="padding: 0;" class="white--text text-center item">{{ $t("zcsj") }}</div>
                <div style="padding: 0;" class="white--text text-center item">{{ $t("tdtgzj") }}</div>
                <div style="padding: 0;" class="white--text text-center item">{{ $t("tdjyls") }}</div>
            </div>
            <div class="ListModel" ref="scrollContainer">
                <div class="badylist" v-for="(item, i) in list" :key="i">
                    <div class="text-center grey--text item">{{ formatAddress(item.address) }}</div>
                    <div class="text-center grey--text item">{{timestampToDate(item.createAt*1000)}}</div>
                    <div class="text-center grey--text item">{{ formatAmount(item.buy,3) }}</div>
                    <div class="text-center grey--text item">{{ formatAmount(item.bet,3) }}</div>
                </div>
                <div v-if="list.length == 0" class="noData">
                    {{ $t("nodata") }}
                </div>
            </div>

        </div>
        <!-- <div class="ListModel" ref="scrollContainer">
            <div class="ItemList" v-for="(item, i) in list" :key="i">
         
                <div class="tagModel">
                    <div class="tag">{{ item.level }}</div>
                    <div class="tag">{{ item.address }}</div>
                </div>
                <div class="font12 m_l_10 m_b_10">{{ $t('tdtgzj') }}</div>
                <div class="font13 m_l_10 m_b_10" style="color: var(--lcitemTitle);">{{ item.buy }}</div>
            </div>
            <div v-if="!list" class="noData">
                {{ $t("nodata") }}
            </div>
        </div> -->

    </div>
</template>
<script setup>
import { ref, onMounted, defineEmits, reactive, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { userStore } from '@/stores/modules/user';
import { userTeam, userInfo,Teamstatic } from '@/api/api'
import { showToast } from 'vant';
import i18n from '@/i18/index';
import { formatAddress, formatAmount } from "@/api/kit";
const router = useRouter()
const emits = defineEmits(['goBlack'])
const isDark = ref(0)
const activebtn = ref(2)
const showProductsDetail = ref(false)
const showOrderhistory = ref(false)
const scrollContainer = ref()
const list = ref([])
const taticList = ref()
const prams = reactive({
    page: 0,
    size: 10
})
const info = ref({})

onMounted(() => {
    getuserInfo()
   
    if (localStorage.getItem('isDark')) {
        isDark.value = localStorage.getItem('isDark')
    }
    getuserTeam()
    getTeamstatic()
    scrollContainer.value.addEventListener("scroll", handleScroll);
})
onBeforeUnmount(() => {
    if (scrollContainer.value) {
        scrollContainer.value.removeEventListener("scroll", handleScroll);
    }
});
const timestampToDate=(timestamp)=> {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}
const getuserInfo = () => {
  userInfo().then(res => {
    console.log(res,'11111')
    if (res && res.user) {
      info.value = res.user
      localStorage.setItem('userData', JSON.stringify(res.user))
    }
  })
}
const levelMath = (e) => {
    if (e) {
        switch (e) {
            case 1:
            return i18n.global.t('pt')
            case 2:
            return 'IB'
            case 3:
            return 'MIB'
            case 4:
            return 'PIB'
            case 5:
            return i18n.global.t('dl')
          
        }
    }
}
const tapLCDK = (e) => {
    activebtn.value = e
}
const goBlack = () => {
    emits('goBlack')
}
const handleScroll = () => {
    if (
        scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop ===
        scrollContainer.value.clientHeight
    ) {
        if (total.value > RecordsList.value.length) {
            prams.page += 1;
            getuserTeam();
        }
    }
}
const getuserTeam = () => { //下面列表
    userTeam().then(res => {
        if(res&& res.code==-1){
            showToast(res.message)
            return
        }
        if (res  ) {
            list.value = Object.entries(res).map(([key, value]) => ({ address: key, ...value }));
        } else {
            list.value = []
        }
    })
}
const getTeamstatic = () => {//统计
    Teamstatic().then(res => {
        if(res&& res.code==-1){
            showToast(res.message)
            return
        }
        taticList.value = res
    })
}
</script>
<style scoped lang="less">
.teamModel {
    height: 100%;
    padding: 10px;
    box-sizing: border-box;


    .headerTitle {
        width: 100%;
        text-align: center;
        height: 28px;
        line-height: 28px;
        color: var(--textColor);
        position: relative;
    }

    .orderhistory {
        top: 50%;
        transform: translate(0, -50%);
        right: 10px;
        width: 15px;
        height: 15px;
        position: absolute;

    }

    .FixedBTN {
        justify-content: space-between;
        position: fixed;
        position: fixed;
        left: 50%;
        display: flex;
        align-items: center;
        transform: translate(-50%, 10px);
        font-size: 13px;
        justify-content: space-between;
        border-radius: 20px;
        background: var(--homeCardBg);

    }

    ;

    .activebtndklc {
        padding: 0 10px;
        width: 80px;
        text-align: center;
        background: var(--LCDKACTIVEBG);
        border-radius: 20px;
        color: var(--LCDKACTIVETEXT);
        height: 28px;
        line-height: 28px;
    }

    .btndklc {
        padding: 0 10px;
        width: 80px;
        text-align: center;
        height: 28px;
        line-height: 28px;
    }

    .teamCardModel {
        position: relative;
        background: var(--homeCardBg);
        padding: 15px 15px;
        border-radius: 5px;
        margin: 10px 0;

        .tgdd {
            position: absolute;
            right: 15px;
            border: 1px solid var(--activeAfterBg);
            color: var(--activeAfterBg);
            border-radius: 20px;
            height: 27px;
            text-align: center;
            line-height: 27px;
            font-size: 13px;
            padding: 0 10px;

        }
    }

    .advertising {
        margin: 15px 0;
        height: 80px;
        background: var(--homeCardBg);
        border-radius: 5px;
    }

    .ListModel {
        height: calc(100vh - 250px);
        overflow: auto;
        padding-bottom: 50px;
        .ItemList {
            background: var(--homeCardBg);
            border-radius: 5px;
            margin: 15px 0;
            padding: 10px 0 10px;
            position: relative;

            .title {
                color: var(--lcitemTitle);
                margin-bottom: 10px;
                padding: 0 10px;
            }

            .tagModel {
                padding: 0 10px;
                display: flex;
                margin-bottom: 10px;
                flex-wrap: wrap;
            }

            .tag {
                background: var(--lcitemTagBG);
                color: var(--lcitemTagText);
                margin-right: 10px;
                border-radius: 10px;
                padding: 2px 8px;
                height: 15px;
                line-height: 15px;
                font-size: 11px;

            }




        }
    }

    .jlfelx {
        display: flex;
        flex-wrap: wrap;

        .w50 {
            width: 50%;
            display: flex;
        }

        .icon {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }

    }

}

.borders {
    border: 1px solid #cfc1c129;

    .tscenter {
        // text-align: center;
        padding-bottom: 10px;
        color: var(--tradeGL);
    }

    .header {
        display: flex;
        font-size: 12px;
        color: var(--tradeGL);
        margin-bottom: 30px;
        margin-top: 10px;

        .item {
            width: 25%;
            text-align: center;
        }
    }

    .badylist {
        display: flex;
        font-size: 12px;

        .item {
            width: 25%;
            text-align: center;
            margin-bottom: 30px;
        }
    }
}
</style>